<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html,
      body {
        height: 100%;
      }
      /* body {
        display: flex;
        flex-direction: column;
      } */
      header {
        /* position: sticky; */
        width: 100%;
        height: 80px;
        background-color: lightblue;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30px;
      }
      header ul {
        display: flex;
        list-style: none;
      }
      header li {
        padding: 0 12px;
      }
      header .menu {
        display: none;
      }
      nav {
        display: none;
        width: 100%;
        height: 60px;
        background-color: aquamarine;
        padding: 0 30px;
        /* display: flex; */
        align-items: center;
        justify-content: space-between;
      }
      main {
        width: 100%;
        /* calc表示运算的功能函数 */
        /* 所有的运算符的前后要有空格 */
        height: calc(100% - 80px);

        /* flex: 1; */
        display: flex;
      }
      aside {
        width: 220px;
        height: 100%;
        background-color: burlywood;
        overflow: auto;
      }
      section {
        flex: 1;
        background-color: lightcoral;
      }

      aside {
        padding: 50px;
      }
      aside li {
        list-style: none;
        line-height: 50px;
      }

      section {
        padding: 100px;
      }

      .shadow {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.6);
        display: none;
      }

      article {
        background-color: #fff;
        padding: 50px;
        overflow: auto;
        width: 220px;
        height: 100%;
      }

      @media all and (max-width: 960px) {
        nav {
          display: flex;
        }
        main {
          height: calc(100% - 140px);
        }
        aside {
          display: none;
        }
      }

      @media all and (max-width: 768px) {
        header ul {
          display: none;
        }
        header .menu {
          display: block;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <img src="../day05/images/icon.jpg" alt="" />
      <ul>
        <li>文档</li>
        <li>api</li>
        <li>演练场</li>
        <li>生态系统</li>
        <li>关于</li>
        <li>赞助</li>
        <li>合作伙伴</li>
      </ul>
      <span class="menu">🏀</span>
    </header>
    <nav>
      <span class="caidan">菜单</span>
      <span>本节目录</span>
    </nav>
    <main>
      <aside>
        <ul>
          <li>创建一个应用</li>
          <li>模板语法</li>
          <li>响应式基础</li>
          <li>计算属性</li>
          <li>类与样式绑定</li>
          <li>条件渲染</li>
          <li>列表渲染</li>
          <li>事件处理</li>
          <li>表单输入绑定</li>
          <li>生命周期</li>
          <li>侦听器</li>
          <li>模板引用</li>
          <li>组件基础</li>
          <li>创建一个应用</li>
          <li>模板语法</li>
          <li>响应式基础</li>
          <li>计算属性</li>
          <li>类与样式绑定</li>
          <li>条件渲染</li>
          <li>列表渲染</li>
          <li>事件处理</li>
          <li>表单输入绑定</li>
          <li>生命周期</li>
          <li>侦听器</li>
          <li>模板引用</li>
          <li>组件基础</li>
        </ul>
      </aside>
      <section>
        <h2>什么是 Vue？​</h2>
        <p>
          Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript
          框架。它基于标准 HTML、CSS 和 JavaScript
          构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue
          都可以胜任。
        </p>
      </section>
    </main>

    <div class="shadow">
      <article>
        <ul>
          <li>创建一个应用</li>
          <li>模板语法</li>
          <li>响应式基础</li>
          <li>计算属性</li>
          <li>类与样式绑定</li>
          <li>条件渲染</li>
          <li>列表渲染</li>
          <li>事件处理</li>
          <li>表单输入绑定</li>
          <li>生命周期</li>
          <li>侦听器</li>
          <li>模板引用</li>
          <li>组件基础</li>
          <li>创建一个应用</li>
          <li>模板语法</li>
          <li>响应式基础</li>
          <li>计算属性</li>
          <li>类与样式绑定</li>
          <li>条件渲染</li>
          <li>列表渲染</li>
          <li>事件处理</li>
          <li>表单输入绑定</li>
          <li>生命周期</li>
          <li>侦听器</li>
          <li>模板引用</li>
          <li>组件基础</li>
        </ul>
      </article>
    </div>

    <script>
      const caidan = document.querySelector(".caidan");
      caidan.addEventListener("click", () => {
        document.querySelector(".shadow").style.display = "block";
      });
    </script>
  </body>
</html>
